<template>
  <a-layout class="layout-demo">
    <siderVue
      v-model:data="list"
      v-model:selected-keys="formStore.moduleKey"
    ></siderVue>
    <a-layout class="layout-demo">
      <a-layout-content>
        <div class="layout-demo-content">
          <a-scrollbar
            class="arco-layout-content-scrollbar"
            type="track"
            style="
              height: calc(100vh - var(--header-height) - 50px);
              overflow: auto;
            "
          >
            <draggableVue v-model:list="list" class="list-group" draggable>
            </draggableVue>
          </a-scrollbar>
        </div>
      </a-layout-content>
    </a-layout>
    <configVue v-model:config="moduleConfig"></configVue>
  </a-layout>
</template>
<script lang="ts">
import { defineComponent, ref, computed, onMounted } from "vue";
import { IconHome, IconCalendar } from "@arco-design/web-vue/es/icon";
import siderVue from "@/views/form/sider.vue";
import draggableVue from "@/components/draggable/index.vue";
import configVue from "@/views/form/config.vue";
import { useFormStore } from "@/store/form.ts";
export default defineComponent({
  components: {
    IconHome,
    IconCalendar,
    siderVue,
    draggableVue,
    configVue,
  },
  setup() {
    const formStore = useFormStore();
    const list = computed({
      get: () => {
        formStore.appConfigAdd(list.value);
        return formStore.list;
      },
      set: (val) => {
        console.log(val, "123321");
        formStore.onListAdd(val);
      },
    });
    onMounted(() => {
      list.value = formStore.list;
    });
    const moduleConfig = computed({
      get: () => {
        if (formStore.moduleKey) {
          // 递归
          const findModule = (arr) => {
            let obj = null;
            arr.forEach((item) => {
              if (item.id == formStore.moduleKey) {
                obj = item;
              } else if (item.children && item.children.length > 0) {
                obj = findModule(item.children);
              }
            });
            return obj;
          };
          return findModule(list.value);
        }
      },
      set: (val) => {
        if (formStore.moduleKey) {
          // 递归
          const updateModule = (arr) => {
            arr.forEach((item) => {
              if (item.id == formStore.moduleKey) {
                item = val;
              } else if (item.children && item.children.length > 0) {
                updateModule(item.children);
              }
            });
          };
          updateModule(list.value);
        }
      },
    });
    return {
      list,
      moduleConfig,
      formStore,
    };
  },
});
</script>
<style lang="scss" scoped>
.list-group {
  padding: 4px;
  background-image: linear-gradient(
      90deg,
      rgba(180, 180, 180, 0.15) 10%,
      rgba(0, 0, 0, 0) 10%
    ),
    linear-gradient(rgba(180, 180, 180, 0.15) 10%, rgba(0, 0, 0, 0) 10%);
  background-size: 10px 10px;
  background-position: -10px calc(100% - 10px), 0 calc(100% - 10px);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  min-height: 86vh;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  align-content: flex-start;
  box-sizing: border-box;
  overflow: hidden;
}
.layout-demo {
  height: calc(100vh - var(--header-height));
  background: var(--color-fill-2);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.layout-demo :deep(.arco-layout-content) {
  margin: 16px;
  padding: 16px 16px 12px;
  color: var(--color-text-2);
  border-radius: 4px;
  background-color: var(--color-bg-3);
}
</style>
